<template>
    <div>
        <!-- 首页轮播图 -->
        <Carousel />
        <!-- 首页搜索医院的表单区域 -->
        <Search />
        <!-- 底部展示医院的结构 -->
        <el-row gutter="20">
            <el-col :span="20">
                <!-- 等级子组件 -->
                <Level @getLevel="getLevel" />
                <!-- 地区子组件 -->
                <Region @getRegion="getRegion" />
                <!-- 展示医院的结构 -->
                <div class="hospital" v-if="hasHospitalArr.length > 0">
                    <Card class="item" v-for="item in hasHospitalArr" :key="item.id" :hospitalInfo="item" />
                </div>
                <el-empty v-else description="暂无数据" />
                <!-- 分页器 -->
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                    :background="true" layout="prev, pager, next, jumper, ->,sizes, total" :total="total"
                    @current-change="currentChange" @size-change="sizeChange" />
            </el-col>
            <el-col :span="4">
                <Tip />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'
import Tip from './tip/index.vue'
import { ref, onMounted } from 'vue'
import { reqHospital } from '@/api/home/index'

// 分页器页码
let pageNo = ref(1)
// 分页器一页展示几条数据
let pageSize = ref(10)
// 存储医院已有的数据
let hasHospitalArr = ref<any>([])
// 存储医院总个数
let total = ref(0)
// 存储医院等级的数据
let hostype = ref('')
// 存储医院的地区
let districtCode = ref('')
onMounted(() => {
    getHospitalInfo()
})
// 获取已有的医院的数据
const getHospitalInfo = async () => {
    let result: any = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
    if (result.code == 200) {
        hasHospitalArr.value = result.data.content
        total.value = result.data.totalElements
    }
}
// 分页器发生变化时的回调
const currentChange = () => {
    getHospitalInfo()
}
// 分页器下拉菜单发生变化的时候回调
const sizeChange = () => {
    getHospitalInfo()
}
// 子组件level的自定义回调:获取儿子给父亲传递过来的等级参数
const getLevel = (level: any) => {
    hostype.value = level
    getHospitalInfo()
}
// 子组件Region的自定义回调:获取儿子给父亲传递过来的地区参数
const getRegion = (item: any) => {
    districtCode.value = item
    getHospitalInfo()
}
</script>

<style scoped lang="scss">
.hospital {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 48%;
        margin: 10px 0px;
    }
}
</style>